<template>
  <view>
    <user-hall v-if="!vuex_identity" @navChange="navChange" @majorIndustrySelect="majorIndustrySelect" @experienceSelect="experienceSelect" :select-list="serverSelectList" :lawyer-list="lawyerList"></user-hall>
    <view v-else class="hall u-p-30">
      <view class="hall-list">
        <navigator :url="item.url ? `${item.url}` : `/pages/subpackages/document/document?id=${item.id}&title=${item.title}`" open-type="navigate" hover-class="none" v-for="(item, index) in selectList" :key="index"
          :style="'background-image: linear-gradient(to right bottom,' + item.leftTop + ',' + item.rightBottom + '); box-shadow: 0 0 5px ' + item.leftTop + ';'" class="hall-list-item u-p-30 u-flex-col">
          <view class="title u-font-40">{{item.title || ""}}</view>
          <view class="subtitle">{{item.jianjie || ""}}</view>
          <view class="tag u-font-26 u-flex u-flex-wrap">
            <template v-for="(its, ind) in item.ch">
              <view v-if="ind < 5" :key="ind" class="item u-flex">
                <u-icon name="checkbox-mark" size="24" color="#ffffffcc"></u-icon>
                <view class="text u-m-l-8">{{its.title || ""}}</view>
              </view>
            </template>
            <view class="item">等 {{item.ch.length}} 余项</view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      type: "",
      selectMajor: {},
      selectIndustry: {},
      serverSelectList: [],
      selectObject: {},
      year: "",
      lawyerList: [],
      selectList: [],
      status: "nomore",
      page: 1,
      pagesize: 10,
      lon: "",
      lat: "",
    };
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_identity"]),
  },
  onLoad() {
    /* #ifdef H5 */
    this.lon = "116.90084";
    this.lat = "36.65142";
    this.getLawyerList();
    /* #endif */
    if (this.vuex_identity) {
      uni.setNavigationBarTitle({ title: "发布需求" });
      uni.setTabBarItem({ index: 2, text: "+发布" });
      this.getHallList();
    } else {
      uni.setNavigationBarTitle({ title: "企业顾问" });
      uni.setTabBarItem({ index: 2, text: "附近" });
      this.getLocationInfo();
      this.getRecruitType();
    }
  },
  methods: {
    // 获取定位
    getLocationInfo() {
      let that = this;
      /* #ifdef MP-WEIXIN */
      uni.authorize({
        scope: "scope.userLocation",
        success() {
          uni.getLocation({
            type: "wgs84",
            success: (res) => {
              console.log(res);
              that.lon = res.longitude;
              that.lat = res.latitude;
              that.getLawyerList();
            },
          });
        },
        fail() {
          that.$t.locationPower();
        },
      });
      /* #endif */
    },
    // ascdesc
    // 律师列表
    getLawyerList() {
      let data = {
        user_id: this.vuex_user_id,
        cp_type: this.type || "",
        major: this.selectMajor.value || "",
        industry: this.selectIndustry.value || "",
        jingyan: "",
        year: this.year || "",
        lon: this.lon,
        lat: this.lat,
        page: this.page,
      };
      this.$api.getLawyerList(data).then((res) => {
        console.log(res);
        this.lawyerList = [...this.lawyerList, ...res];
      });
    },
    // 下拉框经验年限
    getRecruitType() {
      this.$api.dropDown.getRecruitType({ type: 3 }).then((res) => {
        // console.log(res);
        this.serverSelectList = res;
      });
    },
    // 导航
    navChange(e) {
      if (!e) {
        this.selectMajor = {};
        this.selectIndustry = {};
      } else if (e == 1) {
        this.type = 30;
      } else {
        this.type = 28;
      }
      this.serverResetData();
    },
    // 选择专业/行业
    majorIndustrySelect(e) {
      e.type == 1 ? (this.selectMajor = e) : (this.selectIndustry = e);
      this.serverResetData();
    },
    // 选择从业经验
    experienceSelect(e) {
      // this.selectObject = { value: e };
      this.year = e;
      this.serverResetData();
    },
    // 律师 重置数据
    serverResetData() {
      this.page = 1;
      this.lawyerList = [];
      this.getLawyerList();
    },
    // 需求类型
    getHallList() {
      this.$api.getHallList().then((res) => {
        console.log(res);
        let data = res;
        let array = [
          {
            url: "/pages/subpackages/demand/forensics?id=3&title=异地查档",
            leftTop: "#3290FF",
            rightBottom: "#72DDFF",
          },
          {
            url: "/pages/subpackages/demand/entrust?id=4&title=案件代理",
            leftTop: "#00B3D2",
            rightBottom: "#35F2E9",
          },
          {
            leftTop: "#6079F3",
            rightBottom: "#A57CF1",
          },
        ];
        data.forEach((item, index) => {
          data[index] = { ...item, ...array[index] };
        });
        this.selectList = data;
        this.getMajorList();
      });
    },
    // 专业
    getMajorList() {
      this.$api.dropDown.getMajorList().then((res) => {
        // console.log(res);
        this.selectList[1].ch = res;
      });
    },
  },
  onReachBottom() {
    let listName = "";
    if (this.vuex_identity) listName = "lawyerList";
    else listName = "selectList";
    if (this.page * this.pagesize > this[listName].length)
      return (this.status = "nomore");
    this.status = "loading";
    this.page = ++this.page;
    setTimeout(() => {
      // this.getHallList();
      if (this.page * this.pagesize > this[listName].length)
        this.status = "nomore";
      else this.status = "loading";
    }, 500);
  },
};
</script>

<style lang="scss" scoped>
.hall {
  min-height: 100vh;
  /* #ifdef H5 */
  min-height: calc(100vh - 94px);
  /* #endif */
  background-color: $uni-bg-color-hover;

  &-list {
    color: $uni-text-color-inverse;

    &-item {
      border-radius: 10rpx;

      &:nth-child(n + 2) {
        margin: 30rpx 0 0;
      }
    }

    .subtitle {
      margin: 10rpx 0 80rpx;
      color: rgba($color: $uni-text-color-inverse, $alpha: 0.8);
    }

    .tag {
      color: rgba($color: $uni-text-color-inverse, $alpha: 0.8);

      .item {
        flex: 0 0 calc(100% / 3);

        &:nth-child(n + 4) {
          margin: 10rpx 0 0;
        }
      }
    }
  }
}
</style>
